<p>An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. This article covers the basics of using the Shadow DOM.</p>



<blockquote class="wp-block-quote"><p><strong>Note</strong>: Shadow DOM is supported by default in Firefox (63 and onwards), Chrome, Opera, and Safari. The new Chromium-based Edge (79 and onwards) supports it too; the old Edge didn't.</p></blockquote>



<h2>High-level view</h2>



<p>This article assumes you are already familiar with the concept of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction" target="_blank" rel="noreferrer noopener nofollow">DOM (Document Object Model)</a> — a tree-like structure of connected nodes that represents the different elements and strings of text appearing in a markup document (usually an HTML document in the case of web documents). As an example, consider the following HTML fragment:</p>



<pre class="wp-block-code"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Simple DOM example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;section&gt;
        &lt;img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."&gt;
        &lt;p&gt;Here we will add a link to the &lt;a href="https://www.mozilla.org/"&gt;Mozilla homepage&lt;/a&gt;&lt;/p&gt;
      &lt;/section&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>



<p>This fragment produces the following DOM structure:</p>



<figure class="wp-block-image size-full"><img src="https://tcmhack.in/wp-content/uploads/2021/09/dom-screenshot.png" alt="" class="wp-image-869"/></figure>



<p><em>Shadow DOM</em> allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal DOM.</p>



<figure class="wp-block-image size-large"><img src="https://tcmhack.in/wp-content/uploads/2021/09/shadowdom-1-1024x471.png" alt="" class="wp-image-870"/></figure>



<p>There are some bits of shadow DOM terminology to be aware of:</p>



<ul><li><strong>Shadow host:</strong> The regular DOM node that the shadow DOM is attached to.</li><li><strong>Shadow tree:</strong> The DOM tree inside the shadow DOM.</li><li><strong>Shadow boundary:</strong> the place where the shadow DOM ends, and the regular DOM begins.</li><li><strong>Shadow root:</strong> The root node of the shadow tree.</li></ul>



<p>You can affect the nodes in the shadow DOM in exactly the same way as non-shadow nodes — for example appending children or setting attributes, styling individual nodes using element.style.foo, or adding style to the entire shadow DOM tree inside a<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style" target="_blank" rel="noreferrer noopener nofollow"> <code>&lt;style&gt;</code></a> element. The difference is that none of the code inside a shadow DOM can affect anything outside it, allowing for handy encapsulation.</p>



<p>Note that the shadow DOM is not a new thing by any means — browsers have used it for a long time to encapsulate the inner structure of an element. Think for example of a <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" target="_blank" rel="noreferrer noopener nofollow">&lt;video&gt;</a></code> element, with the default browser controls exposed. All you see in the DOM is the <code>&lt;video&gt;</code> element, but it contains a series of buttons and other controls inside its shadow DOM. The shadow DOM spec has made it so that you are allowed to actually manipulate the shadow DOM of your own custom elements.</p>



<h2>Basic usage</h2>



<p>You can attach a shadow root to any element using the&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow" target="_blank" rel="noreferrer noopener nofollow"><code>Element.attachShadow()</code></a>&nbsp;method. This takes as its parameter an options object that contains one option —&nbsp;<code>mode</code>&nbsp;— with a value of&nbsp;<code>open</code>&nbsp;or&nbsp;<code>closed</code>:</p>



<pre class="wp-block-code"><code>let shadow = elementRef.attachShadow({mode: 'open'});
let shadow = elementRef.attachShadow({mode: 'closed'});</code></pre>



<p><code>open</code>&nbsp;means that you can access the shadow DOM using JavaScript written in the main page context, for example using the&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot" target="_blank" rel="noreferrer noopener nofollow"><code>Element.shadowRoot</code></a>&nbsp;property:</p>



<pre class="wp-block-code"><code>let myShadowDom = myCustomElem.shadowRoot;</code></pre>



<p>If you attach a shadow root to a custom element with&nbsp;<code>mode: closed</code>&nbsp;set, you won't be able to access the shadow DOM from the outside —&nbsp;<code>myCustomElem.shadowRoot</code>&nbsp;returns&nbsp;<code>null</code>. This is the case with built in elements that contain shadow DOMs, such as&nbsp;<code>&lt;video&gt;</code>.</p>



<p><strong>Note</strong>: As&nbsp;<a href="https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af" target="_blank" rel="noreferrer noopener nofollow">this blog post shows</a>, it is actually fairly easy to work around closed shadow DOMs, and the hassle to completely hide them is often more than it's worth.</p>



<p>If you are attaching a shadow DOM to a custom element as part of its constructor (by far the most useful application of the shadow DOM), you would use something like this:</p>



<pre class="wp-block-code"><code>let shadow = this.attachShadow({mode: 'open'});</code></pre>



<p>When you've attached a shadow DOM to an element, manipulating it is a matter of just using the same DOM APIs as you use for the regular DOM manipulation:</p>



<pre class="wp-block-code"><code>let para = document.createElement('p');
shadow.appendChild(para);
// etc.</code></pre>



<h2 id="working_through_a_simple_example">Working through a simple example</h2>



<p>Now let's walk through a simple example to demonstrate the shadow DOM in action inside a custom element —&nbsp;<code><a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component" target="_blank" rel="noreferrer noopener nofollow">&lt;popup-info&gt;</a></code>&nbsp;(see a&nbsp;<a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/" target="_blank" rel="noreferrer noopener nofollow">live example</a>&nbsp;also). This takes an image icon and a text string, and embeds the icon into the page. When the icon is focused, it displays the text in a pop up information box to provide further in-context information. To begin with, in our JavaScript file we define a class called&nbsp;<code>PopUpInfo</code>, which extends&nbsp;<code>HTMLElement</code>:</p>



<pre class="wp-block-code"><code>class PopUpInfo extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();

    // write element functionality in here

    ...
  }
}</code></pre>



<p>Inside the class definition we define the element's constructor, which defines all the functionality the element will have when an instance of it is instantiated.</p>



<h3 id="creating_the_shadow_root">Creating the shadow root</h3>



<p>We first attach a shadow root to the custom element:</p>



<pre class="wp-block-code"><code>// Create a shadow root
let shadow = this.attachShadow({mode: 'open'});</code></pre>



<h3 id="creating_the_shadow_dom_structure">Creating the shadow DOM structure</h3>



<p>Next, we use some DOM manipulation to create the element's internal shadow DOM structure:</p>



<pre class="wp-block-code"><code>// Create spans
let wrapper = document.createElement('span');
wrapper.setAttribute('class', 'wrapper');
let icon = document.createElement('span');
icon.setAttribute('class', 'icon');
icon.setAttribute('tabindex', 0);
let info = document.createElement('span');
info.setAttribute('class', 'info');

// Take attribute content and put it inside the info span
let text = this.getAttribute('data-text');
info.textContent = text;

// Insert icon
let imgUrl;
if(this.hasAttribute('img')) {
  imgUrl = this.getAttribute('img');
} else {
  imgUrl = 'img/default.png';
}
let img = document.createElement('img');
img.src = imgUrl;
icon.appendChild(img);
</code></pre>



<h3 id="styling_the_shadow_dom">Styling the shadow DOM</h3>



<p>After that we create a&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style" target="_blank" rel="noreferrer noopener nofollow"><code>&lt;style&gt;</code></a>&nbsp;element and populate it with some CSS to style it:</p>



<pre class="wp-block-code"><code>// Create some CSS to apply to the shadow dom
let style = document.createElement('style');

style.textContent = `
.wrapper {
  position: relative;
}

.info {
  font-size: 0.8rem;
  width: 200px;
  display: inline-block;
  border: 1px solid black;
  padding: 10px;
  background: white;
  border-radius: 10px;
  opacity: 0;
  transition: 0.6s all;
  position: absolute;
  bottom: 20px;
  left: 10px;
  z-index: 3;
}

img {
  width: 1.2rem;
}

.icon:hover + .info, .icon:focus + .info {
  opacity: 1;
}`;</code></pre>



<h3 id="attaching_the_shadow_dom_to_the_shadow_root">Attaching the shadow DOM to the shadow root</h3>



<p>The final step is to attach all the created elements to the shadow root:</p>



<pre class="wp-block-code"><code>// attach the created elements to the shadow dom
shadow.appendChild(style);
shadow.appendChild(wrapper);
wrapper.appendChild(icon);
wrapper.appendChild(info);</code></pre>



<p>Feel free to ask a question in comments.</p>

An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from ot...

Shadow DOM in JavaScript - TCMHACK

Shadow DOM in JavaScript

<h1>Set</h1><p>The&nbsp;<code><strong>Set</strong></code>&nbsp;object lets you store unique values of any type, whether&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Glossary/Primitive" rel="noopener noreferrer" target="_blank">primitive values</a>&nbsp;or object references.</p><h2>Description</h2><p><code>Set</code>&nbsp;objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the&nbsp;<code>Set</code>&nbsp;<strong>may only occur once</strong>; it is unique in the&nbsp;<code>Set</code>'s collection.</p><h3>Value Equality</h3><p>Because each value in the&nbsp;<code>Set</code>&nbsp;has to be unique, the value equality will be checked. In an earlier version of ECMAScript specification, this was not based on the same algorithm as the one used in the&nbsp;<code>===</code>&nbsp;operator. Specifically, for&nbsp;<code>Set</code>s,&nbsp;<code>+0</code>&nbsp;(which is strictly equal to&nbsp;<code>-0</code>) and&nbsp;<code>-0</code>&nbsp;were different values. However, this was changed in the ECMAScript 2015 specification. See&nbsp;<em>"Key equality for -0 and 0"</em>&nbsp;in the&nbsp;browser compatibility&nbsp;table for details.</p><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" rel="noopener noreferrer" target="_blank">NaN</a></code>&nbsp;and&nbsp;<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" rel="noopener noreferrer" target="_blank">undefined</a></code>&nbsp;can also be stored in a Set. All&nbsp;<code>NaN</code>&nbsp;values are equated (i.e.&nbsp;<code>NaN</code>&nbsp;is considered the same as&nbsp;<code>NaN</code>, even though&nbsp;<code>NaN !== NaN</code>).</p><h2>Constructor</h2><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set" rel="noopener noreferrer" target="_blank">Set()</a></code> Creates a new&nbsp;<code>Set</code>&nbsp;object.</p><h2>Static properties</h2><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/@@species" rel="noopener noreferrer" target="_blank">get Set[@@species]</a></code> The constructor function that is used to create derived objects.</p><h2>Instance properties</h2><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/size" rel="noopener noreferrer" target="_blank">Set.prototype.size</a></code> Returns the number of values in the&nbsp;<code>Set</code>&nbsp;object.</p><h2>Instance methods</h2><ol><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/add" rel="noopener noreferrer" target="_blank">Set.prototype.add(value)</a></code> Appends&nbsp;<code>value</code>&nbsp;to the&nbsp;<code>Set</code>&nbsp;object. Returns the&nbsp;<code>Set</code>&nbsp;object with added value.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/clear" rel="noopener noreferrer" target="_blank">Set.prototype.clear()</a></code> Removes all elements from the&nbsp;<code>Set</code>&nbsp;object.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/delete" rel="noopener noreferrer" target="_blank">Set.prototype.delete(value)</a></code> Removes the element associated to the&nbsp;<code>value</code>&nbsp;and returns a boolean asserting whether an element was successfully removed or not.&nbsp;<code>Set.prototype.has(value)</code>&nbsp;will return&nbsp;<code>false</code>&nbsp;afterwards.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/has" rel="noopener noreferrer" target="_blank">Set.prototype.has(value)</a></code> Returns a boolean asserting whether an element is present with the given value in the&nbsp;<code>Set</code>&nbsp;object or not.</li></ol><h3>Iteration methods</h3><ol><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/@@iterator" rel="noopener noreferrer" target="_blank">Set.prototype[@@iterator]()</a></code> Returns a new iterator object that yields the&nbsp;<strong>values</strong>&nbsp;for each element in the&nbsp;<code>Set</code>&nbsp;object in insertion order.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/values" rel="noopener noreferrer" target="_blank">Set.prototype.keys()</a></code> Returns a new iterator object that yields the values for each element in the&nbsp;<code>Set</code>&nbsp;object in insertion order. (For Sets, this is the same as the&nbsp;<code><strong>values()</strong></code>&nbsp;method.)</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/values" rel="noopener noreferrer" target="_blank">Set.prototype.values()</a></code> Returns a new iterator object that yields the&nbsp;<strong>values</strong>&nbsp;for each element in the&nbsp;<code>Set</code>&nbsp;object in insertion order. (For Sets, this is the same as the&nbsp;<code><strong>keys()</strong></code>&nbsp;method.)</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/entries" rel="noopener noreferrer" target="_blank">Set.prototype.entries()</a></code> Returns a new iterator object that contains&nbsp;<strong>an array of&nbsp;</strong><code><strong>[value,&nbsp;value]</strong></code>&nbsp;for each element in the&nbsp;<code>Set</code>&nbsp;object, in insertion order. This is similar to the&nbsp;<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" rel="noopener noreferrer" target="_blank">Map</a></code>&nbsp;object, so that each entry's&nbsp;<em>key</em>&nbsp;is the same as its&nbsp;<em>value</em>&nbsp;for a&nbsp;<code>Set</code>.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/forEach" rel="noopener noreferrer" target="_blank">Set.prototype.forEach(callbackFn[,&nbsp;thisArg])</a></code> Calls&nbsp;<code>callbackFn</code>&nbsp;once for each value present in the&nbsp;<code>Set</code>&nbsp;object, in insertion order. If a&nbsp;<code>thisArg</code>&nbsp;parameter is provided, it will be used as the&nbsp;<code>this</code>&nbsp;value for each invocation of&nbsp;<code>callbackFn</code>.</li></ol><h2>Examples</h2><h3>Using the Set object</h3><pre class="ql-syntax" spellcheck="false">const mySet1 = new Set()

mySet1.add(1)           // Set [ 1 ]
mySet1.add(5)           // Set [ 1, 5 ]
mySet1.add(5)           // Set [ 1, 5 ]
mySet1.add('some text') // Set [ 1, 5, 'some text' ]
const o = {a: 1, b: 2}
mySet1.add(o)

mySet1.add({a: 1, b: 2})   // o is referencing a different object, so this is okay
mySet1.has(1)              // true
mySet1.has(3)              // false, since 3 has not been added to the set
mySet1.has(5)              // true
mySet1.has(Math.sqrt(25))  // true
mySet1.has('Some Text'.toLowerCase()) // true
mySet1.has(o)       // true

mySet1.size         // 5

mySet1.delete(5)    // removes 5 from the set
mySet1.has(5)       // false, 5 has been removed

mySet1.size         // 4, since we just removed one value

console.log(mySet1)
// logs Set(4) [ 1, "some text", {…}, {…} ] in Firefox
// logs Set(4) { 1, "some text", {…}, {…} } in Chrome
</pre><h3>Iterating Sets</h3><pre class="ql-syntax" spellcheck="false">// iterate over items in set
// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
for (let item of mySet1) console.log(item)

// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
for (let item of mySet1.keys()) console.log(item)

// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
for (let item of mySet1.values()) console.log(item)

// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
// (key and value are the same here)
for (let [key, value] of mySet1.entries()) console.log(key)

// convert Set object to an Array object, with Array.from
const myArr = Array.from(mySet1) // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}]

// the following will also work if run in an HTML document
mySet1.add(document.body)
mySet1.has(document.querySelector('body')) // true

// converting between Set and Array
const mySet2 = new Set([1, 2, 3, 4])
mySet2.size                    // 4
[...mySet2]                    // [1, 2, 3, 4]

// intersect can be simulated via
const intersection = new Set([...mySet1].filter(x =&gt; mySet2.has(x)))

// difference can be simulated via
const difference = new Set([...mySet1].filter(x =&gt; !mySet2.has(x)))

// Iterate set entries with forEach()
mySet1.forEach(function(value) {
  console.log(value)
})

// 1
// 2
// 3
// 4
</pre><h3>Implementing basic set operations</h3><pre class="ql-syntax" spellcheck="false">function isSuperset(set, subset) {
    for (let elem of subset) {
        if (!set.has(elem)) {
            return false
        }
    }
    return true
}

function union(setA, setB) {
    let _union = new Set(setA)
    for (let elem of setB) {
        _union.add(elem)
    }
    return _union
}

function intersection(setA, setB) {
    let _intersection = new Set()
    for (let elem of setB) {
        if (setA.has(elem)) {
            _intersection.add(elem)
        }
    }
    return _intersection
}

function symmetricDifference(setA, setB) {
    let _difference = new Set(setA)
    for (let elem of setB) {
        if (_difference.has(elem)) {
            _difference.delete(elem)
        } else {
            _difference.add(elem)
        }
    }
    return _difference
}

function difference(setA, setB) {
    let _difference = new Set(setA)
    for (let elem of setB) {
        _difference.delete(elem)
    }
    return _difference
}

// Examples
const setA = new Set([1, 2, 3, 4])
const setB = new Set([2, 3])
const setC = new Set([3, 4, 5, 6])

isSuperset(setA, setB)          // returns true
union(setA, setC)               // returns Set {1, 2, 3, 4, 5, 6}
intersection(setA, setC)        // returns Set {3, 4}
symmetricDifference(setA, setC) // returns Set {1, 2, 5, 6}
difference(setA, setC)          // returns Set {1, 2}

</pre><h3>Relation with Array objects</h3><pre class="ql-syntax" spellcheck="false">let myArray = ['value1', 'value2', 'value3']

// Use the regular Set constructor to transform an Array into a Set
let mySet = new Set(myArray)

mySet.has('value1')     // returns true

// Use the spread operator to transform a set into an Array.
console.log([...mySet]) // Will show you exactly the same Array as myArray
</pre><h3>Remove duplicate elements from the array</h3><pre class="ql-syntax" spellcheck="false">// Use to remove duplicate elements from the array

const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]

console.log([...new Set(numbers)])
// [2, 3, 4, 5, 6, 7, 32]
</pre><h3>Relation with Strings</h3><pre class="ql-syntax" spellcheck="false">let text = 'India'

const mySet = new Set(text)  // Set(5) {'I', 'n', 'd', 'i', 'a'}
mySet.size  // 5

//case sensitive &amp; duplicate ommision
new Set("Firefox")  // Set(7) { "F", "i", "r", "e", "f", "o", "x" }
new Set("firefox")  // Set(6) { "f", "i", "r", "e", "o", "x" }
</pre><h3>Use Set to ensure the uniqueness of a list of values</h3><pre class="ql-syntax" spellcheck="false">const array = Array.from(document.querySelectorAll('[id]')).map(e =&gt; e.id);
const set = new Set(array);
console.assert(set.size == array.length);
</pre><p>That's how Set works in JavaScript. Feel free to leave a comment below.</p>

The Set object lets you store unique values of any type, whether primitive values or object references. Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collectionThe Set object lets you store unique values of any type, whether primitive values or object references. Set objects are collections of values...

Explanation & Working of Set's in JavaScript - TCMHACK

Explanation & Working of Set's in JavaScript

<p>React library to support easy Zoom, Pan, Pinch on various html dom elements like Images and Div's. It is a Super fast and light react npm package for Zooming, Panning and Pinching html elements in easy way.</p><h2>Features</h2><ul><li><strong>Fast and easy to use</strong></li><li><strong>Light, without external dependencies</strong></li><li><strong>Mobile gestures, touchpad gestures and desktop mouse events support</strong></li><li><strong>Powerful context usage, which gives you a lot of freedom</strong></li><li><strong>Highly customizable</strong></li><li><strong>Animations and many options</strong></li></ul><p><a href="https://prc5.github.io/react-zoom-pan-pinch/" rel="noopener noreferrer" target="_blank" style="color: rgb(255, 255, 250);">Demo</a></p><p><a href="https://github.com/prc5/react-zoom-pan-pinch/" rel="noopener noreferrer" target="_blank">Github</a></p><h2>Install</h2><pre class="ql-syntax" spellcheck="false">npm install <span class="hljs-attr">--save</span> react-zoom-pan-pinch
</pre><p>OR</p><pre class="ql-syntax" spellcheck="false">yarn add react-zoom-pan-pinch
</pre><h2>Usage</h2><pre class="ql-syntax" spellcheck="false"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { <span class="hljs-title class_">Component</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">TransformWrapper</span>, <span class="hljs-title class_">TransformComponent</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-zoom-pan-pinch"</span>;

<span class="hljs-keyword">class</span> <span class="hljs-title class_">Example</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Component</span> {
  <span class="hljs-title function_">render</span>() {
    <span class="hljs-keyword">return</span> (
      <span class="hljs-tag">&lt;<span class="hljs-name">TransformWrapper</span>&gt;&lt;<span class="hljs-name">TransformComponent</span>&gt;&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"test"</span> /&gt;&lt;/<span class="hljs-name">TransformComponent</span>&gt;&lt;/<span class="hljs-name">TransformWrapper</span>&gt;</span>
    );
  }
}
</pre><p>OR</p><pre class="ql-syntax" spellcheck="false"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { <span class="hljs-title class_">Component</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">TransformWrapper</span>, <span class="hljs-title class_">TransformComponent</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-zoom-pan-pinch"</span>;

<span class="hljs-keyword">class</span> <span class="hljs-title class_">Example</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Component</span> {
  <span class="hljs-title function_">render</span>() {
    <span class="hljs-keyword">return</span> (
      &lt;<span class="hljs-title class_">TransformWrapperdefaultScale</span>={<span class="hljs-number">1</span>}defaultPositionX={<span class="hljs-number">200</span>}defaultPositionY={<span class="hljs-number">100</span>}
      &gt;
        {<span class="hljs-function">(<span class="hljs-params">{ zoomIn, zoomOut, resetTransform, ...rest }</span>) =&gt;</span> (
          <span class="hljs-tag">&lt;<span class="hljs-name">React.Fragment</span>&gt;&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"tools"</span>&gt;&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{zoomIn}</span>&gt;</span>+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{zoomOut}</span>&gt;</span>-<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{resetTransform}</span>&gt;</span>x<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;&lt;/<span class="hljs-name">div</span>&gt;&lt;<span class="hljs-name">TransformComponent</span>&gt;&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"test"</span> /&gt;&lt;<span class="hljs-name">div</span>&gt;</span>Example text<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;&lt;/<span class="hljs-name">TransformComponent</span>&gt;&lt;/<span class="hljs-name">React.Fragment</span>&gt;</span>
        )}
      &lt;/<span class="hljs-title class_">TransformWrapper</span>&gt;
    );
  }
}
</pre><h2>Props of TransformWrapper</h2><p>PropsDefaultTypescale1numberpositionXautonumberpositionYautonumberdefaultPositionXnullnumberdefaultPositionYnullnumberdefaultScalenullnumberoptions{...}objectwheel{...}objectpan{...}objectpinch{...}objectzoomIn{...}objectzoomOut{...}objectdoubleClick{...}objectreset{...}objectscalePadding{...}objectonWheelStartnullFunctiononWheelnullFunctiononWheelStopnullFunctiononPanningStartnullFunctiononPanningnullFunctiononPanningStopnullFunctiononPinchingStartnullFunctiononPinchingnullFunctiononPinchingStopnullFunctiononZoomChangenullFunctionenablePaddingtrueBooleanenablePanPaddingtrueBoolean</p><h4>Options prop elements</h4><p>PropsDefaultTypedisabledfalsebooleantransformEnabledtruebooleanminPositionXnullnull, numbermaxPositionXnullnull, numberminPositionYnullnull, numbermaxPositionYnullnull, numberminScale1numbermaxScale8numberlimitToBoundstruebooleanlimitToWrapperfalsebooleancenterContenttrueboolean</p><h4>scalePadding prop elements</h4><p>PropsDefaultTypedisabledfalsebooleansize0.45numberanimationTime200numberanimationTypeeaseOutstring</p><h4>Wheel prop elements</h4><p>PropsDefaultTypedisabledfalsebooleanstep6.5numberwheelEnabledtruebooleantouchPadEnabledtruebooleanlimitsOnWheeltrueboolean</p><h4>Pan prop elements</h4><p>PropsDefaultTypedisabledfalsebooleandisableOnTarget[]array of class names or node tags (div,span...)lockAxisXfalsebooleanlockAxisYfalsebooleanvelocityfalsebooleanvelocityEqualToMovefalsebooleanvelocitySensitivity1numbervelocityMinSpeed1.2numbervelocityBaseTime1800numbervelocityAnimationTypeeaseOutstringpaddingtruebooleanpaddingSize40numberanimationTime200numberanimationTypeeaseOutstring</p><h4>Pinch prop elements</h4><p>PropsDefaultTypedisabledfalseboolean</p><h4>zoomIn prop elements</h4><p>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstring</p><h4>zoomOut prop elements</h4><p>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstring</p><h4>doubleClick prop elements</h4><p>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstringmodezoomInzoomIn / zoomOut / reset</p><h4>reset prop elements</h4><p>PropsDefaultTypedisabledfalsebooleananimationtruebooleananimationTime200numberanimationTypeeaseOutstring</p><h4>Animations types</h4><p>ValueeaseOutlineareaseInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuint</p><h4>Double click modes</h4><p>ValuezoomInzoomOutreset</p><h2>Values returned from TransformWrapper component</h2><p>ValueDescriptionTypesetScale(scale, animationTime, animationType)Sets scaleNumbersetPositionX(positionX, animationTime, animationType)Sets position xNumbersetPositionY(positionY, animationTime, animationType)Sets position yNumberzoomIn()Zooming in function, used for controls button---zoomOut()Zooming out function, used for controls button---setTransform(positionX, positionY, scale, animationTime, animationType)Sets transformations of contentNumber or nullresetTransform()Reset transformations to the initial valuesNumber</p><h2>License</h2><p>MIT ©&nbsp;<a href="https://github.com/prc5" rel="noopener noreferrer" target="_blank">prc5</a></p><p>That's it. Feel free to leave a comment.</p>

React library to support easy Zoom, Pan, Pinch on various html dom elements like Images and Div's. It is a Super fast and light react npm package...

React library to implement Zoom, Pan, Pinch on HTML Elements - TCMHACK

React library to implement Zoom, Pan, Pinch on HTML Elements

<p>In this example we will show how to implement the component scrolling via mouse drag &amp; drop like Google Map, Google Earth, Figma etc.</p>
<p>To implement the scrolling we will use the <code><a href="https://github.com/Norserium/react-indiana-drag-scroll" target="_blank" rel="noopener noreferrer">react-indiana-drag-scroll</a></code> library which is great library to Implement scroll on drag.</p>
<p>So let's get started.</p>
<h2>Demo</h2>
<p>Try it yourself! Go to&nbsp;<a href="https://norserium.github.io/react-indiana-drag-scroll/" target="_blank" rel="noopener noreferrer">demo website</a> / <a href="https://codesandbox.io/s/react-indiana-drag-scroll-default-iw9xh" target="_blank" rel="noopener noreferrer">sandbox</a></p>
<h2>Install</h2>
<pre class="ql-syntax" spellcheck="false">npm install <span class="hljs-attr">--save</span> react-indiana-drag-scroll
</pre>
<p>or install via yarn</p>
<pre class="ql-syntax" spellcheck="false">yarn add react-indiana-drag-scroll
</pre>
<h2>Usage</h2>
<pre class="ql-syntax" spellcheck="false"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { <span class="hljs-title class_">Component</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> <span class="hljs-title class_">ScrollContainer</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'react-indiana-drag-scroll'</span>;
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Example</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Component</span> {
    <span class="hljs-title function_">render</span> () {
        <span class="hljs-keyword">return</span> (
            <span class="hljs-tag">&lt;<span class="hljs-name">ScrollContainer</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"scroll-container"</span>&gt;</span>
                { ... }
            <span class="hljs-tag">&lt;/<span class="hljs-name">ScrollContainer</span>&gt;</span>
        )
    }
}
</pre>
<div class="markdown-heading" dir="auto">
<h2 class="heading-element" dir="auto" tabindex="-1">Component properties</h2>
<a id="user-content-component-properties" class="anchor" href="https://github.com/Norserium/react-indiana-drag-scroll#component-properties" aria-label="Permalink: Component properties"></a></div>
<table>
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>vertical</td>
<td>Bool</td>
<td>Allow vertical drag scrolling</td>
<td>true</td>
</tr>
<tr>
<td>horizontal</td>
<td>Bool</td>
<td>Allow horizontal drag scrolling</td>
<td>true</td>
</tr>
<tr>
<td>hideScrollbars</td>
<td>Bool</td>
<td>Hide the scrollbars</td>
<td>true</td>
</tr>
<tr>
<td>activationDistance</td>
<td>Number</td>
<td>The distance that distinguish click and drag start</td>
<td>10</td>
</tr>
<tr>
<td>children</td>
<td>Node</td>
<td>The content of scrolling container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>onScroll</td>
<td>Function</td>
<td>Invoked when user scrolling container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>onEndScroll</td>
<td>Function</td>
<td>Invoked when user ends scrolling container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>onStartScroll</td>
<td>Function</td>
<td>Invoked when user starts scrolling container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>onClick</td>
<td>Function</td>
<td>Invoked when user clicks the scrolling container without dragging</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>component</td>
<td>String</td>
<td>The component used for the root node.</td>
<td>'div'</td>
</tr>
<tr>
<td>className</td>
<td>String</td>
<td>The custom classname for the container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>draggingClassName</td>
<td>String</td>
<td>The classname for the container during dragging</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>style</td>
<td>Number</td>
<td>The custom styles for the container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>innerRef</td>
<td>ElementType</td>
<td>The ref to the root node (experimental alternative to&nbsp;<code>getElement</code>)</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>ignoreElements</td>
<td>String</td>
<td>Selector for elements that should not trigger the scrolling behaviour (for example,&nbsp;<code>".modal, dialog"</code>&nbsp;or&nbsp;<code>"*[prevent-drag-scroll]"</code>)</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>nativeMobileScroll</td>
<td>Bool</td>
<td>Use native mobile drag scroll for mobile devices</td>
<td>true</td>
</tr>
<tr>
<td>buttons</td>
<td>Array</td>
<td>The list of mouse button numbers that will activate the scroll by drag</td>
<td>[0]</td>
</tr>
</tbody>
</table>
<div class="markdown-heading" dir="auto">
<h2 class="heading-element" dir="auto" tabindex="-1">Static functions</h2>
<a id="user-content-static-functions" class="anchor" href="https://github.com/Norserium/react-indiana-drag-scroll#static-functions" aria-label="Permalink: Static functions"></a></div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Returns</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>getElement</td>
<td>HTMLElement</td>
<td>Returns the HTML element</td>
</tr>
</tbody>
</table>
<h2>How to set the initial scroll?</h2>
<p>To set initial scroll you need get the ref to the root node of the&nbsp;<code>ScrollContainer</code>. It can be implemented by&nbsp;<a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-innerref-0g8v5?file=/index.js" target="_blank" rel="noopener noreferrer">using&nbsp;</a><code><a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-innerref-0g8v5?file=/index.js" target="_blank" rel="noopener noreferrer">innerRef</a></code><a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-innerref-0g8v5?file=/index.js" target="_blank" rel="noopener noreferrer">property</a>&nbsp;or&nbsp;<a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-getelement-99o6q" target="_blank" rel="noopener noreferrer">the static function&nbsp;</a><code><a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-getelement-99o6q" target="_blank" rel="noopener noreferrer">getElement</a></code>. At the worst you can use the&nbsp;<code><a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-finddomnode-dvdop" target="_blank" rel="noopener noreferrer">ReactDOM.findDOMNode</a></code>&nbsp;method.</p>
<h2>License</h2>
<p>The source code is licensed under MIT, all images (except&nbsp;<a href="https://www.freepik.com/free-vector/ancient-egypt-hieroglyphics-background-with-flat-design_2754100.htm" target="_blank" rel="noopener noreferrer">hieroglyphs</a>) are copyrighted to their respective owner &copy;&nbsp;<a href="https://github.com/norserium" target="_blank" rel="noopener noreferrer">Norserium</a></p>
<p>That's it. Feel free to leave a comment below.</p>

Enhance your React applications by implementing intuitive mouse drag-and-drop scrolling. This article provides a comprehensive guide on creating reusable React components that enable users to scroll content effortlessly by clicking and dragging. Discover practical examples and best practices to elevate your project's user experience.

React component scrolling via Mouse Drag & Drop - TCMHACK

React component scrolling via Mouse Drag & Drop

<p>JavaScript ECMAScript 6 (ES6) brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write less code and do more. ES6 introduces us to many great features like arrow functions, template strings, class destruction, Modules… and more. Let’s take a look.</p>



<h2>Basic ES6 Features are</h2>



<ul><li>The let &amp; const keyword</li><li>Arrow Functions</li><li>The For/Of Loop</li><li>Classes</li><li>Promises</li><li>Template Literals</li><li>Default Parameters</li><li>Array and object destructing</li><li>Rest parameter and Spread operator</li><li>Import and export</li></ul>



<h2>The let &amp; const keyword</h2>



<p>The <strong><code>let</code></strong> keyword allows you to declare a variable with block scope.</p>



<pre class="wp-block-code"><code>var x = 10; // Here x is 10
{
    let x = 2; // Here x is 2
}
// Here x is 10</code></pre>



<p>The <strong><code>const</code></strong> keyword allows you to declare a constant (a JavaScript variable with a constant value). <strong><code>Const</code></strong> variables must be assigned a value when they are declared:</p>



<p>Constants are similar to <code>let</code> variables, except that the value cannot be changed.</p>



<pre class="wp-block-code"><code>const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error</code></pre>



<h2>Arrow Functions</h2>



<p><strong>Arrow functions</strong> allows a short syntax for writing function expressions.</p>



<p>You don't need the <code>function</code> keyword, the <code>return</code> keyword, and the curly <code>brackets</code>.</p>



<pre class="wp-block-code"><code>// ES5
var x = function(x, y) {
    return x * y;
}
// ES6
const x = (x, y) =&gt; x * y;</code></pre>



<ul><li>Arrow functions do not have their own <code>this</code>. They are not well suited for defining <code>object</code> methods.</li><li>Arrow functions are not <code>hoisted</code>. They must be defined before they are used.</li><li>Using <code>const</code> is safer than using <code>var</code>, because a function expression is always a constant value.</li><li>You can only omit the <code>return</code> keyword and the curly <code>brackets</code> if the function is a single statement. Because of this, it might be a good habit to always keep them:</li></ul>



<pre class="wp-block-code"><code>const x = (x, y) =&gt; { return x * y };
OR
const x = (x, y) =&gt; x * y; // no need of return keyword in case of single statement</code></pre>



<h2>The For/Of Loop</h2>



<p>The JavaScript <code>for/of</code> statement loops through the values of an iterable objects. </p>



<p><code><strong>for/of</strong></code> lets you loop over data structures that are iterable such as Arrays, Strings, Maps, NodeLists, and more.</p>



<p>The <code>for/of</code> loop has the following syntax:</p>



<pre class="wp-block-code"><code>for (variable of iterable) {
    // code block to be executed
}

<strong>Example:
</strong>var cars = &#91;"BMW", "Volvo", "Mini"];
for (var x of cars) {
  document.write(x + "&lt;br &gt;");
}</code></pre>



<p><strong><em>variable</em></strong> - For every iteration the value of the next property is assigned to the variable. Variable can be declared with <code>const</code>, <code>let</code>, or <code>var</code>.<br><strong><em>iterable</em></strong> - An <code>object</code> that has iterable properties.</p>



<h2>Classes</h2>



<p>Classes are the core of object oriented programming (OOP). They make your code more secure and encapsulated. Using classes gives your code a nice structure and keeps it oriented.</p>



<p>JavaScript <strong><code>Classes</code></strong> are templates for JavaScript Objects.</p>



<pre class="wp-block-code"><code>class ClassName {
    constructor() { … }
}</code></pre>



<p>To create a <code><span class="highlight">class</span></code>, use the class keyword followed by the name of the class with two curly brackets.</p>



<pre class="wp-block-code"><code>class Car {
    constructor(name, year) {
        this.name = name;
        this.year = year;
    }
}</code></pre>



<h2>Promises</h2>



<p>Promises are a new feature of ES6. It’s a method to write asynchronous code. It can be used when, for example, we want to fetch data from an API, or when we have a function that takes time to be executed. Promises make it easier to solve the problem, so let’s create our first Promise!</p>



<pre class="wp-block-code"><code>let myPromise = new Promise(function(resolve, reject) {
    resolve(); // when successful
    reject(); // when error
});
// Must wait for a fulfilled Promise.
myPromise.then(
    function(value) { // code if successful },
    function(error) { // code if some error }
);</code></pre>



<p>If you log your console, it will return a Promise. So, if we want to execute a function after data is fetched, we will use a Promise. The Promise takes two parameters: <code>resolve</code> and <code>reject</code> to handle an expected error.</p>



<pre class="wp-block-code"><code>let&nbsp;myPromise =&nbsp;new&nbsp;Promise(function(resolve, reject) {
&nbsp; setTimeout(function() { resolve("Hello World!!"); },&nbsp;3000);
});
myPromise.then(function(value) {
&nbsp; console.log('Success', value);
}, function(error) {
  console.log('Error', error);
});</code></pre>



<h2>Template Literals</h2>



<p>Template literals or template strings are pretty cool. We don’t have to use the plus (+) operator to concatenate strings, or when we want to use a variable inside a string.</p>



<pre class="wp-block-code"><code><strong>The old syntax: ES5
</strong>function myFunct(name, age) {
    return 'Hi, My name is: '+ name + ' and i am '+ age + ' years old';
}
console.log(myFunct("TCM", 26));
<strong>Output: </strong>Hi, My name is: TCM and i am 26 years old

<strong>The New syntax: ES6</strong>
const myFunct = (name, age) =&gt; `Hi, My name is: NULL and i am NULL years old`;
console.log(myFunct("TCM", 26));
Output: Hi, My name is: TCM and i am 26 years old</code></pre>



<p>So simple! It’s a really huge difference between the old syntax and ES6. When playing with strings, the literal string in ES6 looks more organized and well structured than ES5.</p>



<h2>Default parameters</h2>



<p>When I work in PHP, I usually use default parameters. These allow you to define a parameter in advance.</p>



<p>So, when you forget to write the parameter, it won’t return an <code>undefined</code> error because the parameter is already defined in the default. So when you run your function with a missed parameter, it will take the value of the default parameter and it will not return an error. </p>



<p>Look at this example:</p>



<pre class="wp-block-code"><code>const myFunct = (name, age) =&gt; <span style="background-color: inherit; font-size: inherit;">Hi, My name is: NULL and i am NULL years old</span>;
console.log(myFunct("TCM"));
Output: Hi, My name is: TCM and i am undefined years old</code></pre>



<p>The function above returns undefined, because we forgot to give it the second parameter <strong><code>age</code></strong>.</p>



<p>But if we used the default parameter, it won’t return undefined, and it will use its value when we forget to assign a parameter.</p>



<p> Look at this example:</p>



<pre class="wp-block-code"><code>const myFunct = (name, age = 26) =&gt; Hi, My name is: NULL and i am NULL years old;
console.log(myFunct("TCM"));
Output: Hi, My name is: TCM and i am 26 years old</code></pre>



<h2>Array and Object Destructing</h2>



<p>Destruction makes the assignment of the values of an array or object to the new variable easier.</p>



<p>The old syntax:</p>



<pre class="wp-block-code"><code>const user = {
  id: 12345,
  name: "TCM",
  age: 26
};

let id = user.id;
let name = user.name;
let age = user.age;
console.log(id, name, age);
<strong>Output: </strong>12345 TCM 26</code></pre>



<p>With ES6 syntax:</p>



<pre class="wp-block-code"><code>const user = {
  id: 12345,
  name: "TCM",
  age: 26
};

let { id, name, age } = user;
console.log(id, name, age);
<strong>Output: </strong>12345 TCM 26</code></pre>



<p>With ES5, we have to assign each value to each variable. With ES6, we just put our values within curly brackets to get any property of the object.</p>



<p>Note: if you assign a variable that is not identical to the name of property, it will return <code>undefined</code>. For example, if the name of the property is <code>name</code> and we assign it to a <code>username</code> <code>variable</code>, it will return <code>undefined</code>.</p>



<h2>Rest Parameter and Spread Operator</h2>



<p>The Rest Parameters syntax allows a function to accept an indefinite number of arguments as an <code>array</code>.</p>



<pre class="wp-block-code"><code>const sum = (…args) =&gt; args.reduce((total, num) =&gt; total + num, 0);
console.log(sum(1, 2, 3));
<strong>Output:</strong> 6</code></pre>



<p>The Spread Operator has the same syntax as the rest parameter, but the spread operator takes the Array itself and not just the arguments. We can use the Spread parameter to get the values of an Array, instead of using a for loop or any other method.</p>



<pre class="wp-block-code"><code>const arr=&#91;'said', 20, 'Hi', 'How are you?'];

const Func = array =&gt; &#91;...array, "hello world"];
console.log(Func(arr));
<strong>Output</strong>: &#91;"said", 20, "Hi", "How are you?", "hello world"]</code></pre>



<h2>Import and Export</h2>



<p>Using&nbsp;<code>import</code>&nbsp;and<code>&nbsp;export</code>&nbsp;in your JavaScript application makes it more powerful. They allow you to create separate and reusable components.</p>



<p>If you are familiar with any JavaScript MVC framework, you will see that they use&nbsp;<code>import</code>&nbsp;and&nbsp;<code>export</code>&nbsp;to handle the components most of the time. So how do they really work?</p>



<p>It is simple!&nbsp;<code>export</code>&nbsp;allows you to export a module to be used in another JavaScript component. We use&nbsp;<code>import</code>&nbsp;to import that module to use it in our component.</p>



<p>For example, we have two files. The first is named&nbsp;<code>detailComponent.js</code> and the second is named <code>homeComponent.js</code>.</p>



<p>In&nbsp;<code>detailComponent.js</code> we are going to export the&nbsp;<code>detail</code>&nbsp;function.</p>



<pre class="wp-block-code"><code>const myFunct = (name, age = 26) =&gt; Hi, My name is: NULL and i am NULL years old;
export default myFunct;</code></pre>



<p>And if we want to use this function in&nbsp;<code>homeComponent.js</code>, we will just use&nbsp;<code>import</code>.</p>



<pre class="wp-block-code"><code>import myFunct from './detailComponent.js';
console.log(myFunct("TCM"));
Output: Hi, My name is: TCM and i am 26 years old</code></pre>



<p>If we want to import more than one module, we just put them within curly brackets.</p>



<pre class="wp-block-code"><code>import {myFunct, user, profile} from './detailComponent.js';
console.log(myFunct("TCM"));
console.log(user);
console.log(profile);</code></pre>



<p>So cool, isn’t it?!  Feel free to leave a comment below.</p>

JavaScript ECMAScript 6 (ES6) brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write ...

Overview of ES6 Features in JavaScript - TCMHACK

Overview of ES6 Features in JavaScript

<p><a href="https://www.microsoft.com/en-us/edge/features" target="_blank" rel="noreferrer noopener nofollow">Microsoft Edge</a> is a fast, easy to use, and secure browser built for the modern web. The stable browser version is available on Windows, macOS, iOS, and Android, while the developer preview is available for Linux. Edge allows you to synchronize your bookmarks, history, and passwords on all your devices.</p>



<p>Edge is based on Chromium, the same open-source project used by Google Chrome browser, and it is compatible with the Chrome extensions.</p>



<p>This article explains how to install the Microsoft Edge Browser web browser on Ubuntu. The Edge developer preview does not include all the features and may not be stable enough to be used as the main browser.</p>



<h2>Installing Edge Browser on Ubuntu</h2>



<p>Installing Edge browser on Ubuntu is a pretty straightforward process. We’ll enable the Microsoft Edge repository from the command-line and install the package with apt.</p>



<ol><li>Update the packages index and install the dependencies by running the following command as a user with <strong>sudo</strong> privileges :</li></ol>



<pre id="block-d85b3eb6-be73-40e1-8372-e0b120f7abdc" class="wp-block-code"><code>sudo apt update<br>sudo apt install software-properties-common apt-transport-https wget</code></pre>



<p>2. Import the Microsoft GPG key with <strong>wget</strong> :</p>



<pre class="wp-block-code"><code>wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -</code></pre>



<p>And enable the Edge browser repository by typing:</p>



<pre class="wp-block-code"><code>sudo add-apt-repository "deb &#91;arch=amd64] https://packages.microsoft.com/repos/edge stable main"</code></pre>



<p>3. Once the <strong>apt repository</strong> is enabled , install the Edge package:</p>



<pre class="wp-block-code"><code>sudo apt install microsoft-edge-dev</code></pre>



<p>At this point, you have Edge installed on your Ubuntu system.</p>



<p>When a new version is released, you can update the Edge package through your desktop standard Software Update tool or by running the following commands in your terminal:</p>



<pre class="wp-block-code"><code>sudo apt update<br>sudo apt upgrade</code></pre>



<h2>Starting Edge Browser</h2>



<p>In the Activities search bar, type “Edge” and click on the icon to launch the application:</p>



<figure class="wp-block-image size-large"><img src="https://tcmhack.in/wp-content/uploads/2021/04/ms-edge-install-1024x633.png" alt="" class="wp-image-829"/></figure>



<p>Edge can also be launched from the command-line by typing <code>microsoft-edge</code>.</p>



<p>When you start the browser for the first time, a window like the following will appear asking if you want to send usage statistic and diagnostic data to Microsoft:</p>



<figure class="wp-block-image size-large"><img src="https://tcmhack.in/wp-content/uploads/2021/04/ms-edge-start-1024x642.png" alt="" class="wp-image-830"/></figure>



<p>Select according to your preference, and click OK to proceed.</p>



<p>From here, you can set up your new tab page, change the browser settings and install add-ons.</p>



<h3>Conclusion</h3>



<p>We’ve shown you how to install Microsoft Edge on your Ubuntu 20.04 desktop machine.</p>



<p>If you’ve previously used a different browser, like&nbsp;<strong>Chrome</strong>&nbsp;, <strong>Firefox</strong>,&nbsp;<strong>Chromium</strong>&nbsp;, or <strong>Opera</strong>, you can import your bookmarks and settings into <strong>Edge</strong>.</p>



<p>Feel free to leave a comment below.</p>

Microsoft Edge is a fast, easy to use, and secure browser built for the modern web. The stable browser version is available on Windows, macOS, iO...

How to Install Microsoft Edge Browser on Ubuntu - TCMHACK

How to Install Microsoft Edge Browser on Ubuntu

<p>Many developers use <a href="https://github.com/facebook/create-react-app" target="_blank" rel="noreferrer noopener nofollow">create-react-app</a> to generate a boilerplate needed to quickly start developing a React application. It gives you the option to define Environment Variables is a special file named <code><strong>.env.</strong></code></p>



<p>All variables defined in this file are accessible in the code via <code><strong>process.env..</strong></code></p>



<h2>Define Environment Variable</h2>



<p>First, open the project and create <strong><code>.env</code></strong> file in the root directory:</p>



<figure class="wp-block-image size-large"><img src="https://tcmhack.in/wp-content/uploads/2021/03/react-env-1.png" alt="" class="wp-image-821"/><figcaption>env var on root</figcaption></figure>



<p>To define Environment Variable, open the <strong>.env</strong> file and paste the following code:</p>



<pre class="wp-block-code"><code>MY_ENVIRONMENT_VARIABLE=test</code></pre>



<p>We have just defined our first variable, great.</p>



<p>Next, save the changes, close the file and navigate to <strong>App.js</strong> and read the variable:</p>



<pre class="wp-block-code"><code>const App = () =&gt; {
    console.log(process.env.MY_ENVIRONMENT_VARIABLE);
    return &lt;div className="App"&gt;Hello, world&lt;/div&gt;;
};</code></pre>



<p>Start the project: <code>NPM START</code></p>



<p>And note that <strong>undefined</strong> was output to the console:</p>



<figure class="wp-block-image size-large"><img src="https://tcmhack.in/wp-content/uploads/2021/03/undefined-console-1024x106.png" alt="" class="wp-image-822"/><figcaption>undefined console</figcaption></figure>



<p>Do you know why?</p>



<h2>Gotcha #1</h2>



<p>The first mistake we made is not reloading our app after defining an Environment Variable.</p>



<p>Remember that Environment Variables are embedded during build time.</p>



<p>Any change in the <strong>.env</strong> file requires an application to be reloaded.</p>



<p>Let's do this and try again:</p>



<figure class="wp-block-image size-large"><img src="https://tcmhack.in/wp-content/uploads/2021/03/undefined-console-1-1024x106.png" alt="" class="wp-image-823"/><figcaption>undefined console</figcaption></figure>



<p>Still no success, let's find out why.</p>



<h2>Gotcha #2</h2>



<p>The second thing to remember is that, for security reasons, create-react-app does not allow you to define Environment Variables that do not start with the <strong>REACT_APP_</strong> prefix.</p>



<p>Our variable name is definitely wrong and will not work.</p>



<p>Let's change it:</p>



<pre class="wp-block-code"><code>REACT_APP_MY_ENVIRONMENT_VARIABLE=test</code></pre>



<p>And in the <strong>App.js</strong>:</p>



<pre class="wp-block-code"><code>const App = () =&gt; {
    console.log(process.env.REACT_APP_MY_ENVIRONMENT_VARIABLE);
    return &lt;div className="App"&gt;Hello, world&lt;/div&gt;;
};

export default App;</code></pre>



<p>Reload an application and check the console:</p>



<figure class="wp-block-image size-large"><img src="https://tcmhack.in/wp-content/uploads/2021/03/success-console-1024x104.png" alt="" class="wp-image-824"/><figcaption>working console</figcaption></figure>



<p>Hooray, we got it to work.</p>



<h3>Summary</h3>



<p>The two most important things to remember when defining Environment Variables in a project bootstrapped with create-react-app are:</p>



<ul><li>Always reload your application after making a change to the <strong>.env</strong> file</li><li>Always prefix your variables with <strong>REACT_APP_</strong></li></ul>



<p></p>

Many developers use create-react-app to generate a boilerplate needed to quickly start developing a React application. It gives you the option to...

Can't Read Environment Variables In React? - TCMHACK

Can't Read Environment Variables In React?

<p>With Google’s new release of an SSL Certificates having a small ranking boost on search engine ranking, we’ve decided to release an easy tutorial on installing the ssl certificates on an Amazon EC2 Ubuntu server.</p>



<p>For those wanting to check their version of Ubuntu you can run:</p>



<pre class="wp-block-code"><code>lsb_release -a</code></pre>



<p>This is what ours returned:</p>



<pre class="wp-block-code"><code>No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 18.04.5 LTS
Release:	18.04
Codename:	bionic</code></pre>



<p>So let’s dive into what needs to be done to install Standard SSL Certificate with Amazon EC2.</p>



<h2>MOVE SSL CERTIFICATES FILES TO SERVER</h2>



<p>You need to move your ssl files to server.  Follow the following steps.</p>



<p>1. SSH to your server</p>



<pre class="wp-block-code"><code>ssh -i yourkey.pem ubuntu@your_server_ip_or_domain</code></pre>



<p>2. Go to  your html folder &amp; make a folder to hold the ssl files</p>



<pre class="wp-block-code"><code>cd /var/www/html
sudo mkdir ssl_files</code></pre>



<p>3. Now go to your folder in which ssl files are stored on your local machine &amp; open the terminal <code><span class="highlight">CTRL+ALT+T on Ubuntu</span></code></p>



<p>4. Move the files to server via <a href="https://tcmhack.in/how-to-upload-files-via-ssh-using-scp-on-ubuntu/">Secure Copy Protocal (SCP)</a> to your newly created folder i.e <code><span class="highlight">ssl_files</span></code>. Don't know how to use SCP? <a href="https://tcmhack.in/how-to-upload-files-via-ssh-using-scp-on-ubuntu/">Click here</a></p>



<p>6. Now SSH again to your server and move the certificate files to required place.</p>



<pre class="wp-block-code"><code>ssh -i yourkey.pem ubuntu@your_server_ip_or_domain
cd /var/www/html/ssl_files

sudo cp your_site.crt /etc/apache2/ssl/your_site.crt
sudo cp your_site.key /etc/apache2/ssl/your_site.key
sudo cp your_site.ca-bundle /etc/apache2/ssl/your_site.ca-bundle</code></pre>



<h2>ADDING SSL VIRTUALHOST ENTRIES</h2>



<p>At this point, all we need to do is enable the VHOST for our site to render the SSL pages. You will either need to create a new VHOST entry if its a new site, or add this to an existing entry for your site.</p>



<pre class="wp-block-code"><code>&lt;VirtualHost *:443&gt;
    ServerName your_site.com
    ServerAlias www.your_site.com
    DocumentRoot /documentroot/
    SSLEngine on
    SSLCertificateFile /etc/apache2/ssl/your_site.crt
    SSLCertificateKeyFile /etc/apache2/ssl/private/your_site.key
    SSLCertificateChainFile /etc/apache2/ssl/your_site.ca-bundle
&lt;/VirtualHost&gt;</code></pre>



<p>Restart the apache:</p>



<pre class="wp-block-code"><code>sudo systemctl restart apache2</code></pre>



<h2>ENABLE APACHE 2 SSL MODULE IF NOT ENABLED ALREADY</h2>



<p>Next thing to do if you haven’t already is to enable the SSL module for Apache and then restarting apache. This is as simple as typing:</p>



<pre class="wp-block-code"><code>sudo a2enmod ssl
sudo systemctl restart apache2</code></pre>



<h2>ENABLE SSL TRAFFIC ON AMAZON EC2</h2>



<p>One last step is to ensure SSL traffic is enabled or your security group in Amazon. By default, Amazon does not enable this as not all sites will need it. Log in to your Amazon account, go to EC2 and your server instance. From their click on the Security Group assigned to your site, and enable HTTPs traffic for Inbound.</p>



<figure class="wp-block-image size-large"><img src="https://tcmhack.in/wp-content/uploads/2021/02/Amazon-Enabled-HTTPS-Traffic.jpg" alt="Enable ssl traffice on amazon ec2" class="wp-image-805"/><figcaption>Enable ssl traffice on amazon ec2</figcaption></figure>



<p>Load your site and you should now be able to run https! Just make sure to redirect any http url’s to https, so your not serving the same content up twice by mistake, as this would be bad for SEO and hurt your Google rankings. One main reason to add SSL is for Google rankings — we don’t want to gain a little, and lose our seo by serving duplicate content.</p>



<p>That's it. If you're still facing the issues? feel free to ask the questions in comment section.</p>

With Google’s new release of an SSL Certificates having a small ranking boost on search engine ranking, we’ve decided to release an easy tutorial...

How to install SSL Certificates on Amazon EC2 Ubuntu Server - TCMHACK

How to install SSL Certificates on Amazon EC2 Ubuntu Server

<p>In this tutorial, we will show you how to use the&nbsp;<code>shutdown</code>&nbsp;command through practical examples and detailed explanations of the most common&nbsp;<code>shutdown</code>&nbsp;options.</p>



<p>The&nbsp;<code>shutdown</code>&nbsp;command brings the system down in a secure way. When the&nbsp;<code>shutdown</code>&nbsp;is initiated, all logged-in users and processes are notified that the system is going down, and no further logins are allowed. You can shut down your system immediately or at the specified time.</p>



<h2 id="shutdown-command-syntax">Shutdown Command Syntax</h2>



<p>Before going into how to use the&nbsp;<code>shutdown</code>&nbsp;command, let’s start by reviewing the basic syntax.</p>



<p>The&nbsp;<code>shutdown</code>&nbsp;command expressions take the following form:</p>



<pre class="wp-block-code"><code>shutdown &#91;OPTIONS] &#91;TIME] &#91;MESSAGE]</code></pre>



<ul><li><code>options</code>&nbsp;-&nbsp;<a href="http://man7.org/linux/man-pages/man8/shutdown.8.html" target="_blank" rel="noreferrer noopener nofollow">Shutdown options</a>&nbsp;such as halt, power-off (the default option) or reboot the system.</li><li><code>time</code>&nbsp;- The time argument specifies when to perform the shutdown process.</li><li><code>message</code>&nbsp;- The message argument specifies a message which will be broadcast to all users.</li></ul>



<p>On the recent Linux distributions&nbsp;<code>shutdown</code>&nbsp;is an alias to&nbsp;<code>systemctl</code>&nbsp;and it is available in the system only for compatibility reasons.</p>



<h2 id="how-to-use-the-shutdown-command">How to Use the&nbsp;<code>shutdown</code>&nbsp;Command</h2>



<p>Only the root and users with&nbsp;<code>sudo</code>&nbsp;privileges can use&nbsp;<code>crontab</code>&nbsp;command.</p>



<p>When used with no arguments, the&nbsp;<code>shutdown</code>&nbsp;command will power off the machine.</p>



<pre class="wp-block-code"><code>sudo shutdown</code></pre>



<figure class="wp-block-image size-large"><img src="http://ec2-13-127-91-65.ap-south-1.compute.amazonaws.com/wp-content/uploads/2020/12/shutdown.jpg" alt="" class="wp-image-763"/></figure>



<p>The shutdown process starts after 1 minute, which is the default time interval.</p>



<h2 id="how-to-shutdown-the-system-at-a-specified-time">How to Shutdown the System at a Specified Time</h2>



<p>The time argument can have two different formats. It can be an absolute time in the format&nbsp;<code>hh:mm</code>&nbsp;and relative time in the format&nbsp;<code>+m</code>&nbsp;where m is the number of minutes from now.</p>



<p>The following example will schedule system shutdown at 11 A.M:</p>



<pre class="wp-block-code"><code>sudo shutdown 11:00</code></pre>



<p>The following example will schedule system&nbsp;<code>shutdown</code>&nbsp;in 10 minutes from now:</p>



<pre class="wp-block-code"><code>sudo shutdown +10</code></pre>



<h2 id="how-to-shutdown-the-system-immediately">How to Shutdown the System Immediately</h2>



<p>To shut down your system immediately you can use&nbsp;<code>+0</code>&nbsp;or its alias&nbsp;<code>now</code>:</p>



<pre class="wp-block-code"><code>sudo shutdown now</code></pre>



<h2 id="how-to-broadcast-a-custom-message">How to Broadcast a Custom Message</h2>



<p>To broadcast a custom message along with the standard&nbsp;<code>shutdown</code>&nbsp;notification type your message after the time argument.</p>



<p>The following example, will shut down the system in 30 minutes from now and notify the users that a hardware upgrade will be performed:</p>



<pre class="wp-block-code"><code>sudo shutdown +30 "Hardware upgrade"</code></pre>



<p>It is important to mention that when specifying a custom wall message, you must specify a time argument too.</p>



<h2 id="how-to-reboot-the-system">How to Reboot the System</h2>



<p>To reboot the system, use the&nbsp;<code>-r</code>&nbsp;argument:</p>



<pre class="wp-block-code"><code>sudo shutdown -r</code></pre>



<p>You can also specify a time argument and a custom message:</p>



<pre class="wp-block-code"><code>shutdown -r +5 "Updating kernel"</code></pre>



<p>The command above will reboot the system after 5 minutes and broadcast&nbsp;<code>Updating kernel</code>.</p>



<h2 id="how-to-cancel-a-scheduled-shutdown">How to Cancel a Scheduled Shutdown</h2>



<p>If you have scheduled shutdown and you want to cancel it, you can use the&nbsp;<code>-c</code>&nbsp;argument:</p>



<pre class="wp-block-code"><code>sudo shutdown -c</code></pre>



<p>When canceling a scheduled shutdown, you cannot specify a time argument, but you can still broadcast a message that will be sent to all users.</p>



<pre class="wp-block-code"><code>sudo shutdown -c "Canceling the reboot"</code></pre>



<h2 id="conclusion">Conclusion</h2>



<p>The&nbsp;<code>shutdown</code>&nbsp;command allows you to halt, power-off and reboot your Linux system.</p>



<p>To learn more about&nbsp;<code>shutdown</code>, visit the&nbsp;<a href="https://linux.die.net/man/8/shutdown" rel="noreferrer noopener" target="_blank">shutdown man</a>&nbsp;page.</p>



<p>If you have any questions or feedback, feel free to leave a comment.</p>

In this tutorial, we will show you how to use the&nbsp;shutdown&nbsp;command through practical examples and detailed explanations of the most com...

Linux Shutdown Command - TCMHACK

Linux Shutdown Command

<p>Let’s Encrypt is a free SSL provider. Porkbun is very good domain registrar. We can download free SSL from porkbun dashboard. All we need is to upload it into our VPS server and need to add the path of the certificates into virtual host file.</p>



<p>Download SSL from porkbun.</p>



<div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://ec2-13-127-91-65.ap-south-1.compute.amazonaws.com/wp-content/uploads/2020/07/porkbun-1024x617.jpg" alt="" class="wp-image-702"/></figure></div>



<p>You shall get a ZIP file containing the following 4 files:-</p>



<ol><li>domain.cert.pem</li><li>intermediate.cert.pem</li><li>private.key.pem</li><li>public.key.pem</li></ol>



<p>Now Upload file no. 1 and 3 only (i.e. domain.cert.pem and private.key.pem) into your VPS home folder (i.e. /home/admin/).</p>



<p>Create a Virtual Host for your domain (for example: yourdomain.com) as shown below:</p>



<pre class="wp-block-code"><code>sudo nano /etc/nginx/sites-available/wbxpress.net.conf</code></pre>



<pre class="wp-block-code"><code>server {
    server_name    yourdomain.com www.yourdomain.com;
    root           /var/www/yourdomain;
    index          index.html index.php;

    location / {
        try_files $uri $uri/ /index.php?$args;
    }

    location ~* \.php$ {
        fastcgi_pass unix:/run/php/php7.2-fpm.sock;
        include         fastcgi_params;
        fastcgi_param   SCRIPT_FILENAME    $document_root$fastcgi_script_name;
        fastcgi_param   SCRIPT_NAME        $fastcgi_script_name;
    }

    listen 443 ssl http2;
    listen &#91;::]:443 ssl http2;

    ssl_certificate /home/admin/domain.cert.pem;
    ssl_certificate_key /home/admin/private.key.pem;	
}
server {
    if ($host = www.yourdomain.com) {
        return 301 https://yourdomain.net$request_uri;
    }
    if ($host = yourdomain.com) {
        return 301 https://yourdomain.net$request_uri;
    }
    listen 80;
    listen &#91;::]:80;
    server_name yourdomain.com www.yourdomain.com;
    return 404;
}</code></pre>



<p>Also, we need to replace SSL settings as found from <a href="https://mozilla.github.io/server-side-tls/ssl-config-generator/" target="_blank" rel="noreferrer noopener">SSL Config File Generator</a> at nginx.conf file.</p>



<pre class="wp-block-code"><code>sudo nano /etc/nginx/nginx.conf</code></pre>



<pre class="wp-block-preformatted">ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers 'ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS';
ssl_prefer_server_ciphers on;</pre>



<p>The above configuration works perfectly well in our case.</p>

Let’s Encrypt is a free SSL provider. Porkbun is very good domain registrar. We can download free SSL from porkbun dashboard. All we need is to u...

How to Install a Porkbun SSL on NGINX - TCMHACK

How to Install a Porkbun SSL on NGINX

<p>In this tutorial we are going to show you, with step-by-step instructions on how to install Let’s Encrypt with Apache on Ubuntu.</p>



<p>Let’s Encrypt is an open SSL Certificate Authority (CA) that offers free domain-validated (DV) certificates for your websites. SSL Certificates are used to establish a secure encrypted connection between a web server and a user’s web browser. The SSL certificates that have been issued by Let’s Encrypt are valid for 90 days and are trusted by most web browsers today.</p>



<h2>1. Requirements</h2>



<p>In order to start with the installation procedure, you need to have Apache or Nginx installed on your server. If there is no web server installed on your virtual server, please follow this tutorial to install Apache.</p>



<p>Also, you need a registered domain name with its A record pointing to your server’s IP address. For the purposes of this tutorial, we will use ‘yourdomain.com’.</p>



<h2>2. Install CertBot</h2>



<p>Run the following commands:</p>



<pre class="wp-block-code"><code>sudo apt-get install software-properties-common python-software-properties
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python-certbot-apache</code></pre>



<h2>3. Install Let’s Encrypt SSL</h2>



<p>Install Let’s Encrypt SSL certificate on your domain (do not forget to replace ‘yourdomain.com’ with your actual domain):</p>



<pre class="wp-block-code"><code>sudo certbot --apache -d yourdomain.com</code></pre>



<pre class="wp-block-preformatted">Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator apache, Installer apache
Enter email address (used for urgent renewal and security notices) (Enter 'c' to
cancel): admin@yourdomain.com

Please read the Terms of Service at
https://letsencrypt.org/documents/LE-SA-v1.2-November-15-2017.pdf. You must
agree in order to register with the ACME server at
https://acme-v01.api.letsencrypt.org/directory
(A)gree/(C)ancel: A

Would you be willing to share your email address with the Electronic Frontier
Foundation, a founding partner of the Let's Encrypt project and the non-profit
organization that develops Certbot? We'd like to send you email about EFF and
our work to encrypt the web, protect its users and defend digital rights.
(Y)es/(N)o: N
Obtaining a new certificate
Performing the following challenges:
tls-sni-01 challenge for linuxhostsupport.com
Waiting for verification…
Cleaning up challenges
Created an SSL vhost at /etc/apache2/sites-available/000-default-le-ssl.conf
Deploying Certificate for yourdomain.com to VirtualHost /etc/apache2/sites-available/000-default-le-ssl.conf
Enabling available site: /etc/apache2/sites-available/000-default-le-ssl.conf</pre>



<h2>4. Redirect HTTP traffic to HTTPS</h2>



<pre class="wp-block-preformatted">Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
Select the appropriate number [1-2] then [enter] (press 'c' to cancel): 2
Redirecting vhost in /etc/apache2/sites-enabled/000-default.conf to ssl vhost in /etc/apache2/sites-available/000-default-le-ssl.conf

Congratulations! You have successfully enabled https://yourdomain.com</pre>



<h2>5. Renew the SSL certificate with a cron job</h2>



<p>Create a cron job so the SSL certificate is renewed automatically. Run:</p>



<pre class="wp-block-code"><code>crontab -e</code></pre>



<p>and add the following line:</p>



<pre class="wp-block-code"><code>0 0 1 * * /usr/bin/letsencrypt renew >> /var/log/letsencrypt-renew.log</code></pre>



<p>Save and close that file and restart cron service for the changes to take effect:</p>



<pre class="wp-block-code"><code>service cron restart</code></pre>



<p>Open https://yourdomain.com in your favorite web browser, and check whether Let’s Encrypt SSL is installed properly:</p>



<figure class="wp-block-image size-large"><img src="http://ec2-13-127-91-65.ap-south-1.compute.amazonaws.com/wp-content/uploads/2020/07/ssl-secure-screenshot.png" alt="" class="wp-image-698"/></figure>



<p>That is it. Let’s Encrypt SSL certificate has been successfully installed on your website.</p>

In this tutorial we are going to show you, with step-by-step instructions on how to install Let’s Encrypt with Apache on Ubuntu.



Let’s Encrypt...